<template>
    <div class="header">
		<div class="mytime">今天是 {{fullyear}} 年 {{month}} 月 {{datet}} 日 星期{{ weekstr}} {{currentTime}}</div>
        <div class="logo">欢迎来到领养系统后台</div>
        
		<div class="header-right">
			<div class="header-user-con">
				<!-- 用户头像 -->
				<div class="user-avator">
					<img src="../assets/mylogo.png" />
				</div>
				<!-- 用户名下拉菜单 -->
				<el-dropdown class="user-name" trigger="click" @command="handleCommand">
					<span class="el-dropdown-link">
						{{ userName }}
						<i class="el-icon-caret-bottom"></i>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</div>
    </div>
</template>

<script setup>
	//显示日期时间
    import { ref, onMounted, onUnmounted } from 'vue';
	import router from '../router';
    const myDate = new Date()
    const fullyear = myDate.getFullYear()
    const month = myDate.getMonth() + 1
    const datet = myDate.getDate()
    const Week = ['日','一','二','三','四','五','六']
    const weekstr = Week[myDate.getDay()]
    const currentTime = ref(new Date().toLocaleTimeString);
    const updateTime = () => {
        currentTime.value = new Date().toLocaleTimeString();
    }
    onMounted(() => {
        updateTime()
        const intervalId = setInterval( updateTime, 100);
        onUnmounted(() => {
            clearInterval(intervalId);
        });
    })
	//显示头像和名字
	const userName = ref(sessionStorage.getItem('aname') || 'admin');
	const handleCommand = (command) => {
  		if (command === 'loginout') {
		sessionStorage.removeItem('aname');
    	router.push("loginout"); 
 		}
	};
</script>


<style scoped>
	.header {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 70px;
		font-size: 22px;
		background: #648e93;
		color: #fff;
	}
	.collapse-btn {
		float: left;
		padding: 0 21px;
		cursor: pointer;
		line-height: 70px;
	}
	.header .logo {
		float: left;
		width: 500px;
		line-height: 70px;
		font-size: 36px;
		text-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
	}
	.header .mytime {
		float: left;
		width: 500px;
		line-height: 70px;
	}
	.header-right {
		float: right;
		padding-right: 50px;
	}
	.header-user-con {
		display: flex;
		height: 70px;
		align-items: center;
	}
	.btn-fullscreen {
		transform: rotate(45deg);
		margin-right: 5px;
		font-size: 24px;
	}
	.btn-bell,
	.btn-fullscreen {
		position: relative;
		width: 30px;
		height: 30px;
		text-align: center;
		border-radius: 15px;
		cursor: pointer;
	}
	.btn-bell-badge {
		position: absolute;
		right: 0;
		top: -2px;
		width: 8px;
		height: 8px;
		border-radius: 4px;
		background: #f56c6c;
		color: #fff;
	}
	.btn-bell .el-icon-bell {
		color: #fff;
	}
	.user-name {
		margin-left: 10px;
	}
	.user-avator {
		margin-left: 20px;
		transition: 0.5s;
	}
	.user-avator:hover {
		transform: rotate(720deg);
	}
	.user-avator img {
		display: block;
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}
	.el-dropdown-link {
		color: #fff;
		cursor: pointer;
		margin-left: 5px;
	}
	.el-dropdown-menu__item {
		text-align: center;
	}
</style>